<body>
  <div class="form">
    <nz-tabset [(nzSelectedIndex)]="selectedIndex" class="custom-tabset">
      <nz-tab nzTitle="Sign Up" class="tab">
        <h1>Welcome Citi Tech</h1>
        <form nz-form [formGroup]="signupForm" (ngSubmit)="submitSignUp()">
          <div class="top-row">
            <nz-form-item>
              <nz-form-control nzErrorTip="Please input your name!">
                <nz-input-group>
                  <input type="text" nz-input formControlName="username"
                    placeholder="Name" />
                </nz-input-group>
              </nz-form-control>
            </nz-form-item>
          </div>
          <nz-form-item>
            <nz-form-control nzErrorTip="Please input your password!">
              <nz-input-group>
                <input type="password" nz-input formControlName="password"
                  placeholder="Password" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control nzErrorTip="Please confirm your password!">
              <nz-input-group>
                <input type="password" nz-input
                  formControlName="confirmPassword"
                  placeholder="Confirm Password" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <button nz-button nzType="primary" class="button-block button"
            [disabled]="!signupForm.valid">Get Started</button>
        </form>
      </nz-tab>
      <nz-tab nzTitle="Log In" class="tab">
        <h1>Enjoy bidding!</h1>
        <form nz-form [formGroup]="loginForm" (ngSubmit)="submitLogin()">
          <nz-form-item>
            <nz-form-control nzErrorTip="Please input your name!">
              <nz-input-group>
                <input type="text" nz-input formControlName="username"
                  placeholder="Name" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control nzErrorTip="Please input your password!">
              <nz-input-group>
                <input type="password" nz-input formControlName="password"
                  placeholder="Password" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <a href="#" class="forgot">Forgot Password?</a>
          <button nz-button nzType="primary"
            class="button-block button login-button"
            [disabled]="!loginForm.valid">
            <span></span>
            <span></span>
            <span></span>
            <span></span> Log In </button>
        </form>
      </nz-tab>
    </nz-tabset>
  </div>
</body>